<template>
    <van-nav-bar :title="title" left-arrow @click-left="handleLeft" />
    <div class="shelvesStatusDrtails">
        <div class="conent_pre_header">
            <div class="conent_pre_img">
                <van-image :src="detailInfo.productImage + '?x-oss-process=image/resize,w_300'"
                    v-if="detailInfo?.productImage" @click="enlargeImage(detailInfo.productImage)">
                    <div class="liveStreamingMechanisms" v-if="detailInfo.hmMechanismsList[1]?.cooperationMode">多机制
                    </div>
                </van-image>
                <van-image :src="errImg" v-else></van-image>
            </div>
            <div class="conent_pre_des" @click="detailsClick(detailInfo.productsId)">
                <div class="contnt_title">
                    <div class="contnt_styleName">
                        {{ detailInfo?.styleName }}
                    </div>
                </div>
                <div class="contnt_mechanism">
                    {{ detailInfo?.sellingPoints }}
                </div>
                <div class="contnt_bottom">
                    <div class="price">￥ {{ hmMechanismsList?.price ||
                        hmMechanismsList?.costPrice }}</div>
                    <div class="commission" v-if="hmMechanismsList?.commission">佣 {{ (hmMechanismsList?.commission || 0)
                        + "%" }}
                    </div>
                    <div class="coreName">{{ detailInfo?.coreName }}</div>
                </div>
            </div>
        </div>
        <div class="product_detail_title--content">
            <div class="product_detail_title-content-info product_detail_title-content-infos">
                <div class="product_detail_title-content-info-name">机制：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList?.liveStreamingMechanism }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">规格/材质：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.specs }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '上架详情'">
                <div class="product_detail_title-content-info-name">当前库存：</div>
                <div class="product_detail_title-content-info-content colors">
                    {{ detailInfo?.stockAvailable }}件
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '上架详情'">
                <div class="product_detail_title-content-info-name">上架时间：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.createTime }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '上架详情'">
                <div class="product_detail_title-content-info-name">上架人：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.stockName }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '下架详情'">
                <div class="product_detail_title-content-info-name">出库频次：</div>
                <div class="product_detail_title-content-info-content colors">
                    {{ detailInfo?.outNum }}次
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '下架详情'">
                <div class="product_detail_title-content-info-name">下架时间：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.createTime }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '下架详情'">
                <div class="product_detail_title-content-info-name">下架人：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.stockName }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">库存编码：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.stockCode }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '上架详情'">
                <div class="product_detail_title-content-info-name">库位码：</div>
                <div class="product_detail_title-content-info-content warehouse_color">
                    {{ detailInfo?.locationName }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '上架详情'">
                <div class="product_detail_title-content-info-name">货架类型：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.dictLabel }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '下架详情'">
                <div class="product_detail_title-content-info-name">原库位码：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.locationName }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '下架详情'">
                <div class="product_detail_title-content-info-name">原货架类型：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.dictLabel }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="title == '下架详情'">
                <div class="product_detail_title-content-info-name">备注：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo?.offShelfRemark }}
                </div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getOffRecordId } from '@/api/productHome/index'
import { showImagePreview } from 'vant';
import { getEnvValue } from "@/utils/index";
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const router = useRouter();
const route = useRoute();
// 商品详情
const detailInfo = ref<any>()
// 机制
const hmMechanismsList = ref<any>()
// 标题
const title: any = computed(() => {
    return route.query.title;
});
// 商品id
const id = computed(() => {
    return route.query.id;
});
/** 获取详情 */
const getDetail = async () => {
    const res = await getOffRecordId(id.value as any)
    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        res.data.productImage = getEnvValue("VITE_APP_PIC_URL") + real_src[0]
    }
    detailInfo.value = res.data;
    hmMechanismsList.value = res.data.hmMechanismsList[0]
}
getDetail()
/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
/** 回退 */
const handleLeft = () => {
    router.back()
}
/** 跳转详情 */
const detailsClick = (id: string) => {
    router.push(`/productHomeDetail/${id}`)
}
</script>
<style lang="less" scoped>
:deep(.van-icon-arrow-left) {
    color: #000;
}

.shelvesStatusDrtails {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #F6FAFF;


    .conent_pre_header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 15px;

        .conent_pre_img {
            width: 90px;
            height: 90px;

            .liveStreamingMechanisms {
                position: absolute;
                top: 0;
                left: 0;
                width: 50px;
                height: 20px;
                background: #0094FF;
                border-radius: 2px 0px 2px 0px;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
                text-align: center;
                line-height: 20px;
            }

            .van-image {
                width: 90px;
                height: 90px;

                :deep(.van-image__img) {
                    border-radius: 5px !important;
                }
            }
        }

        .conent_pre_des {
            width: calc(100% - 90px);
            height: 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 10px;
            align-content: space-around;

            .contnt_title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .contnt_styleName {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                    width: 150px;
                    ;
                    height: 20px;
                    white-space: nowrap;
                    /* 确保文本在一行内显示 */
                    overflow: hidden;
                    /* 隐藏溢出的内容 */
                    text-overflow: ellipsis;
                }

                .contnt_type {
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;
                }

                .contnt_status {
                    width: 67px;
                    height: 26px;
                    background: #E7FDEE;
                    border-radius: 2px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #19D11B;
                    text-align: center;
                    line-height: 26px;
                }

            }

            .contnt_mechanism {
                width: 100%;
                font-weight: 400;
                font-size: 12px;
                color: #B8BECA;
                white-space: nowrap;
                /* 确保文本在一行内显示 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
            }

            .contnt_bottom {
                width: 100%;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #B8BECA;

                .price {
                    font-weight: 500;
                    font-size: 14px;
                    color: #FC2540;
                }

                .commission {
                    font-weight: 500;
                    font-size: 14px;
                    color: #FC2540;
                }

                .coreName {
                    font-weight: 400;
                    font-size: 12px;
                    color: #0094FF;
                }
            }
        }


    }

    .product_detail_title--content {
        width: 100%;
        background: #fff;
        padding: 15px;
        box-sizing: border-box;
    }

    .product_detail_title-content-infos {
        margin-top: 0 !important;
    }

    .product_detail_title-content-info {
        margin-top: 20px;
        display: flex;

        .product_detail_title-content-info-name {
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            line-height: 14px;
            width: 90px;
        }

        .colors {
            color: #0094FF !important;
        }

        .warehouse_color {
            color: #19D11B;
        }

        .product_detail_title-content-info-content {
            font-weight: 400;
            font-size: 14px;
            color: #b8beca;
            line-height: 14px;
            margin-left: auto;
            width: calc(100% - 75px);
            display: flex;
            justify-content: flex-end;
            word-break: break-all;
        }

    }
}
</style>